<template>
  <w-pickbox :picker="picker">
    <template #dialog>
      <w-dialog v-if="showDialog" class="large" preload="DialogStd" @close="showDialog = false" :commands="commands">
        <AMapPicker ref="amap" city="福州" :value="mapValue"></AMapPicker>
      </w-dialog>
    </template>
  </w-pickbox>
</template>

<script>
  import $ from '../../dfish.js'
  import AMapPicker from '@/components/AMapPicker.vue'

  export default {
    components: {
      AMapPicker
    },
    props: ['modelValue'],
    data() {
      return {
        showDialog: false,
        commands: {
          save: () => {
            this.setValue(this.$refs.amap.val())
            this.showDialog = false
          }
        }
      }
    },
    watch: {
      modelValue(v) {
        if (!v || !v.value) {
          this.setValue(v)
        }
      }
    },
    mounted() {
      this.setValue(this.modelValue)
      $(this).saveModified()
    },
    methods: {
      picker() {
        this.showDialog = true
      },
      setValue(mv) {
        $(this).val(mv ? {value: mv, text: mv.address} : null)
      }
    },
    computed: {
      mapValue() {
        return this.modelValue && this.modelValue.value
      }
    }
  }
</script>
